<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo by hans</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul {
            list-style-type: none;
        }
        .wrap {
            position: relative;
            width: 250px;
            height: 250px;
            background-color: #eee;
            border: 1px solid #aaa;
        }
        .item {
            position: absolute;
            border: 1px solid #aaa;
            background-image: url(img/1.jpg);
            background-size: 250px 250px;;
            transition: .5s;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- <input type="file" name="" id="upload"> -->
        <div class="wrap">
            <ul></ul>
        </div>
    </div>
</body>
<script src="./game.js"></script>
<script>
    let $ = sel => document.querySelector(sel);
    let $$ = sel => document.querySelectorAll(sel);
    let log = console.log.bind(console);

    let game = new Puzzle({
        container: $('.wrap ul'),
    }).init();

    let arr = [0, 1, 2, 
               3, 8, 4,
               6, 7, 5];
    let store = [];
    let stack = [];
    let i = arr.indexOf(8);
    let scale = 3;

    // up
    if (i >= scale) {
        stack.push(i - scale);
    }
    // down
    if (i < scale * (scale - 1)) {
        stack.push(i + scale);
    }
    // left
    if (i % scale !== 0) {
        stack.push(i - 1);
    }
    // right
    if ((i + 1) % scale !== 0) {
        stack.push(i + 1);
    }
    while(stack.length) {
        let pos = stack.pop();
        let tmp = [...arr];
        [tmp[i], tmp[pos]] = [tmp[pos], tmp[i]];
        if (store.indexOf(tmp.toString()) === -1) {
            store.push(tmp.toString());
        }
    }


</script>
</html>